<template>
  <border
    class="equipment-survey"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-part" slot="module-content">
      <div class="part-position-right">
        <octagon
          :iconClass="octagonList[0].iconClass"
          :octagonName="octagonList[0].octagonName"
          :octagonNumber="octagonList[0].octagonNumber"
          :octagonUnit="octagonList[0].octagonUnit"></octagon>
        <octagon
          :iconClass="octagonList[1].iconClass"
          :octagonName="octagonList[1].octagonName"
          :octagonNumber="octagonList[1].octagonNumber"
          :octagonUnit="octagonList[1].octagonUnit"></octagon>
      </div>
      <div class="part-top">
        <div class="part-left">
          <bar-line
            :title="barLineConfig.title"
            :axis="barLineConfig.axis"
            :yAxis="barLineConfig.yAxis"
            :tooltipsConfig="barLineConfig.tooltipsConfig"
            :seriesData="barLineConfig.seriesData"></bar-line>
        </div>
        <div class="part-right">
          <pyramid
            :title="pyramid.title"
            :imgIndex="pyramid.imgIndex"
            :tipsMessage="pyramid.tipsMessage"
            :imgSrc="pyramid.imgSrc"
            :tipsColor="pyramid.tipsColor"
            :legend="pyramid.legend"></pyramid>
        </div>
      </div>
      <div class="part-bottom">
        <single-ring
          :title="single.title"
          :singleData="single.data"
          :colorIndex="single.colorIndex"></single-ring>
        <single-ring
          :title="single1.title"
          :singleData="single1.data"
          :colorIndex="single1.colorIndex"></single-ring>
        <single-ring
          :title="single2.title"
          :singleData="single2.data"
          :colorIndex="single2.colorIndex"></single-ring>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/OctagonItem.vue'
import BarLine from './../components/BarLine.vue'
import SingleRing from './../components/SingleRing.vue'
import Pyramid from './../components/Pyramid.vue'
export default {
  name: 'equipmentSurvey',
  components: {
    Border,
    Octagon,
    BarLine,
    SingleRing,
    Pyramid
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '设备概况',
        goPageUrl: ''
      },
      octagonList: [
        {
          iconClass: 'icon-shebei',
          octagonName: '正常设备',
          octagonNumber: 0,
          octagonUnit: '个'
        },
        {
          iconClass: 'icon-shebeiyichang',
          octagonName: '异常设备',
          octagonNumber: 0,
          octagonUnit: '个'
        }
      ],
      barLineConfig: {
        title: {
          text: '近一年水电趋势'
        },
        axis: {
          yAxisConversion: 'w', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      single: {
        title: '本月设备完好率',
        data: '0',
        colorIndex: 0
      },
      single1: {
        title: '本月巡更完成率',
        data: '0',
        colorIndex: 0
      },
      single2: {
        title: '本月保养完成率',
        data: '0',
        colorIndex: 0
      },
      pyramid: {
        title: '本月水电情况',
        imgIndex: [3],
        tipsMessage: [{
          beforeMessage: '本月耗水量',
          message: '0',
          unit: ''
        }, {
          beforeMessage: '本月耗电量',
          message: '0',
          unit: ''
        }]
      }
    }
  },
  mounted () {
    let self = this
    setTimeout(function () {
      self.barLineConfig.seriesData = [...[
        {
          data: [164577, 193265, 185541, 203488, 214765, 216788, 224345, 219643, 233445, 258742, 238433, 243576],
          name: '耗水量',
          colorIndex: 0,
          isBar: true
        },
        {
          data: [186345, 209876, 198622, 178943, 198856, 209743, 196445, 204987, 218633, 235744, 192355, 248765],
          name: '耗电量',
          colorIndex: 1
        }
      ]]
      self.single.data = 55
      self.single1.data = 55
      self.single2.data = 55
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
.equipment-survey {
  .module-part {
    position: relative;
    width: 100%;
    height: 100%;
    .part-position-right {
      width: 24%;
      position: absolute;
      top: calc(-10% + 10px);
      right: 10px;
      & /deep/ .octagon-li{
        width: 100%;
        margin: 0 0 10px;
      }
    }
    .part-top {
      width: 100%;
      height: 65%;
    }
    .part-bottom {
      width: 100%;
      height: calc(35% - 5px);
      .singleRing {
        width: calc(100% / 3);
        height: 100%;
        float: left;
      }
    }
    .part-left {
      width: 64%;
      height: 100%;
      float: left;
    }
    .part-right {
      width: 36%;
      height: 55%;
      margin-top: 15%;
      float: right;
    }
  }
}
</style>
